<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性</title>
		<style>
					
					/* red 红色 宽度50  高度50 */
					.red {
						background-color: red;
						width: 50px;
						height: 60px;
					}
					
					.blue {
						background-color: aqua;
						width: 100px;
						height: 100px;
					}
					
				</style>
	</head>
	<body>
		<div id="app">
			
			<!--1需求：href中属性动态赋值
			  语法：v-bind:href="vue中的属性"-->
			<a v-bind:href="url">百度</a>
			<!-- 简写 -->
			<a :href="url">百度</a>
			<!--  2.class类型绑定 
				class中可以定义多个样式.简化程序的调用
				2需求: 需要动态的为class赋值
				规则: :class是属性的绑定,绑定之后查找对应的属性
				colorClass: "blue" 之后根据value值 blue 查找对应的CSS样式
			-->
			
			<div v-bind:class="colorClass">我是class修饰</div> 
			<br>
			<!-- 简写 -->
			<div :class="colorClass">我是class修饰</div> 
			<br>
			<!-- 3.属性切换
			 需求：通过按钮控制样式是否展现 属性
			 语法：class={class类型的名称:false}
			 -->
			 <div :class="{red:flag}">我是class修饰</div>
			 <button @click="flag=!flag">切换</button>	
			 <!-- 小节
			  1.
			  2.
			  -->
			 
			
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
		const APP=new Vue({
			el: "#app",
			data:{
				url: "http://www.baidu.com",
				colorClass: "blue",
				flag: true,
				
				},
			
		})	
		</script>	
		
	</body>
</html>
